<template>
  <Module :cfg="moduleCfg">
    <div class="item-group">
      <div class="item" :class="{active:activeEvtCode===item.code}" v-for="(item,idx) in getChartData" :key="idx"
           style="width:16%" @click="filterEvt(item.code)">
        <RingChart :data="item" :cfg="ringChartCfg"></RingChart>
        <span class="name">
          <span>{{getName(item.name)[0]}}</span><br>
          <span>{{getName(item.name)[1]}}</span>
        </span>
      </div>
    </div>
  </Module>
</template>

<script>
  import Module from 'comp/common/Module';
  import RingChart from 'kkui/echarts/RingChart';

  export default {
    name: "EvtCount",
    components: {
      Module,
      RingChart
    },
    props: ['data'],
    data() {
      return {
        moduleCfg: {
          icon: WebCfg.icons.evtCount,
          title: `事件统计`
        },
        ringChartCfg: {
          unit: '次',
          bigFontSize: 12,
          smallFontSize: 12,
          legendShow: false
        },
        activeEvtCode: ''
      }
    },
    computed: {
      getChartData() {
        let sum = this.data.reduce(function (total, cur) {
          return total + cur['eventCount'];
        }, 0);
        return this.data.map(item => {
          return {
            code: item.code,
            name: item.value,
            value: item['eventCount'] * 1,
            percent: sum !== 0 ? parseFloat((item['eventCount'] * 1 / sum * 100).toString()).toFixed(1) : 0
          }
        });
      },
      getName() {
        return function (name) {
          let rst=[];
          const arr = name.split('-');
          if(arr.length === 1){
            rst=[arr[0],''];
          }else{
            rst=[arr[1], arr[0] ]
          }
          return rst;
        }
      }
    },
    methods: {
      filterEvt(code) {
        this.activeEvtCode = this.activeEvtCode === code ? '' : code;
        this.$parent.$refs.map.hiddenEvtCode = this.activeEvtCode;
        this.$parent.$refs.map.closePanel();
      }
    }
  }
</script>

<style scoped lang="scss">
  .item {
    position: relative;
    cursor: pointer;

    .name {
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      color: #999;
      width: 100%;
      font-weight: 600;
      line-height: 14px;

      span:first-child{
        font-size: 14px!important;
      }
      span:last-child{
        font-size: 10px!important;
      }
    }
  }

  .item.active {
    .name {
      color: var(--alert-color);
    }
  }


</style>
